<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			canvas {
				border: solid 1px cadetblue;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="900" height="800"></canvas>
		<script type="text/javascript">
			/* 方法获取HTML <canvas> 元素的引用并获取这个元素的context——图像稍后将在此被渲染 */
			const ctx = document.getElementById('canvas').getContext('2d');
			/* 绘制图像 */
			/* ctx.drawImage(图片对象 , x , y ) */
			/* ctx.drawImage(图片对象 , x , y , 宽度 , 高度) */
			/* ctx.drawImage(图片对象 , 图片裁剪后x , 图片裁剪后y , 裁剪宽度 , 裁剪高度 , x位置 , y位置 , 宽度 , 高度 )前面参数控制显示的镜头位置,后面控制显示后再canvas中的位置 */
			let img = new Image()
			let img1 = new Image()
			img.src="img/bj.jpg";
			/* 绘制图片时需要一定的时间载入图片,不然绘制不出来 */
			img.onload=function(){
				ctx.drawImage(img,50,50,300,200)
				ctx.strokeStyle='#ffffff';
				ctx.font="20px 黑体"
				ctx.strokeText('战双帕里什',60,70)
			}
			
			img1.src="img/tx.jpg";
			img1.onload=function(){
				ctx.drawImage(img1,300,100,350,600,100,300,200,300)//,50,350,200,300
			}
		</script>
	</body>
</html>
